<template>
		  <page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="health-records-page">

    <!-- 数据记录列表 -->
    <view class="records-list">

      <!-- 循环渲染每条健康记录 -->
      <view class="record-card" v-for="(record, index) in healthRecords" :key="index">
        <!-- 每条记录的标题（显示测试时间） -->
        <view class="card-header">
          <view class="record-date text13">{{ record.testTime }}</view>
        </view>
        
        <!-- 记录详情（属性名+属性值） -->
        <view class="record-details">
			<view class="detail-item">
			  <view class="item-label text12">体重</view>
			  <view class="item-value text12">{{ record.bloodPressure }}</view>
			</view>
			<view class="detail-item">
			  <view class="item-label text12">身高</view>
			  <view class="item-value text12">{{ record.bloodPressure }}</view>
			</view>
          <view class="detail-item">
            <view class="item-label text12">血压</view>
            <view class="item-value text12">{{ record.bloodPressure }}</view>
          </view>
          <view class="detail-item">
            <view class="item-label text12">血糖</view>
            <view class="item-value text12">{{ record.bloodSugar }}</view>
          </view>
          <view class="detail-item">
            <view class="item-label text12">心率</view>
            <view class="item-value text12">{{ record.heartRate }}</view>
          </view>
          <view class="detail-item">
            <view class="item-label text12">睡眠</view>
            <view class="item-value text12">{{ record.sleep }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

import {
	useFontSizeStore
} from '@/stores/fontSizeStore';

const fontSizeStore = useFontSizeStore();

// 健康记录数组（多条数据，每条包含血压、血糖等属性）
const healthRecords = ref([
  {
    bloodPressure: '135/85 mmHg',
    bloodSugar: '5.8 mmol/L',
    heartRate: '72 次/分',
    sleep: '7.5 小时',
    testTime: '2024-05-22 08:30'
  },
  {
    bloodPressure: '132/82 mmHg',
    bloodSugar: '5.6 mmol/L',
    heartRate: '70 次/分',
    sleep: '7.8 小时',
    testTime: '2024-05-21 07:45'
  },
  {
    bloodPressure: '138/86 mmHg',
    bloodSugar: '5.9 mmol/L',
    heartRate: '75 次/分',
    sleep: '7.2 小时',
    testTime: '2024-05-20 08:10'
  }
])
</script>

<style scoped>
.health-records-page {
  /* background-color: #f5f5f5; */
  min-height: 100vh;
  padding: 30rpx;
}

/* 记录列表容器 */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx; /* 卡片之间的间距 */
}

/* 单条记录卡片 */
.record-card {
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  /* box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); */
}

/* 卡片头部（显示测试时间） */
.card-header {
  background-color: #72acda;
  padding: 20rpx 30rpx;
}
.record-date {
  font-size: 30rpx;
  color: #fff;
  font-weight: 500;
}

/* 记录详情区域 */
.record-details {
  padding: 20rpx 30rpx;
}

/* 详情项（左右两列） */
.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
}
/* 最后一项去掉底边框 */
.detail-item:last-child {
  border-bottom: none;
}

/* 左侧属性名 */
.item-label {
  font-size: 32rpx;
  color: #666;
}

/* 右侧属性值 */
.item-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  text-align: right;
}
</style>